<!DOCTYPE html>
<html>
<head>
<title>Html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
	<div id="div">
		<button id="btn1">事件对象测试--Type</button>
		<button id="btn2">事件对象测试Target--</button>
		<a href="www.xunlei.com" id="aid">迅雷</a>
	</div>
	<script>
		document.getElementById("btn1").addEventListener("click", showType);
		document.getElementById("btn2").addEventListener("click", showTarget);
		document.getElementById("div").addEventListener("click", showDiv);//要搞清为什么没有调用却输出了内容--阻止事件冒泡
		document.getElementById("aid").addEventListener("click", showA);
		function showType(event) {
			alert(event.type);//获取事件类型
			event.stopPropagation();//阻止事件冒泡
		}
		function showTarget(event) {
			alert(event.target);//获取事件目标
			event.stopPropagation();//阻止事件冒泡
		}
		function showDiv() {
			alert("div");
		}
		function showA(event) {
			//event.stopPropagation();
			//event.preventDefault();//阻止事件默认行为--a标签的默认事件行为是打开链接
		}
	</script>
</body>
</html>
